<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" name="" id="">
  <button class="button1">一级废话</button>
  <button class="button2">二级废话</button>
  <p style="width: 1000px; height: 500px; border: 1px solid #000000;"></p>
  <script>
    const input = document.querySelector('input'),
      b1 = document.querySelector('.button1'),
      b2 = document.querySelector('.button2'),
      p = document.querySelector('p')

    class Bullshit {
      static welcome_tips() {
        return '温馨提示，你现在在说废话'
      }
      static welcom() {
        p.innerHTML = this.welcome_tips()
      }
      constructor(text, color) {
        this.text = text;
        this.color = color;
      }
      show() {
        p.innerHTML = this.text + input.value;
        p.style.color = this.color;
      }
      set extra(value) {
        this.value = value;
        p.innerHTML += this.value
      }
      get extra() {
        return `这些是废话：${this.text}${this.value}`
      }

    }

    class Son_of_Bullshit extends Bullshit {
      constructor(text, color, fontSize) {
        super(text, color)
        this.fontSize = fontSize
      }
      show() {
        p.innerHTML = this.text + p.innerHTML;
        p.style.color = this.color;
        p.style.fontSize = this.fontSize;
      }


    }

    b1.addEventListener('click', () => {
      const bullshit = new Bullshit('我知道', "#00a1d6")
      bullshit.show();
      bullshit.extra = '儿'
      console.log(bullshit.extra)
    })

    b2.addEventListener('click', () => {
      const son_of_Bullshit = new Son_of_Bullshit('你知道', "#f85b88", '40px')
      son_of_Bullshit.show();
    })
    p.addEventListener('mouseover', () => {
      Bullshit.welcom()
    })
  </script>
</body>

</html>